<template>
  <Card class="min-height">
    <Row :gutter="15">
      <i-col span="6">
        <Card>
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>部门
          </p>
          <Tree :data="data5" :render="renderContent" class="tree"></Tree>
        </Card>
      </i-col>
      <i-col span="18">
        <Card>
          <p slot="title">
            <Icon type="ios-film-outline"></Icon>
            部门技术人员 ({{this.tmpdata.title}})
          </p>
          <dtable
            border
            :columns="columns7"
            add
            delCheck
            :dataAll="data6"
            :exportcolumns="columns8"
            :exportfilter="dataFilter"
            @delCheck="delCheck"
            @add="add"
            @handelSelect="handelSelect"
          ></dtable>
        </Card>
      </i-col>
    </Row>
  </Card>
</template>

<script>
import moment from 'moment';
import dtable from '@/components/table/dtable.vue'; // 采用biztable
export default {
    name: 'engineer',
    data () {
      return {
        searchKey: '',
        data5: [],
        data6: [],
        buttonProps: {
          type: 'ghost',
          size: 'small'
      },
        columns7: [
        { type: 'selection' },
          {
              title: '姓名',
              key: 'Name',
              fixed: 'left',
              width: 130,
              render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                }
              }),
                h('strong', params.row.Name)
            ])
          }
          },
          {
              title: '性别',
              key: 'Sex',
              width: 100,
              render: (h, { row }) => {
              return h('span', {}, row.Sex == 0 ? '男' : '女')
          }
          },
          {
              title: '出生年月',
              key: 'Birth',
              width: 120,
              render: (h, { row, column, index }) => {
              return h('span', {}, moment(row.Birth).format('YYYY-MM-DD'))
          }
          },
          {
              title: '学历',
              key: 'Xueli',
              width: 100,
              render: (h, { row }) => {
              let str = '';
              switch (row.Xueli) {
            case 0:
                str = '本科';
                break
              default:
                str = '其它';
                break
            }
              return h('span', {}, str)
          }
          },
          {
              title: '学历获得',
              key: 'Xuelihuode',
              width: 100,
              render: (h, { row }) => {
              let str = '';
              switch (row.Xuelihuode) {
            case 0:
                str = '全日制';
                break
              case 1:
                str = '函授';
                break
              case 2:
                str = '成人';
                break
              default:
                str = '其它';
                break
            }
              return h('span', {}, str)
          }
          },
          {
              title: '毕业院校及专业',
              width: 150,
              key: 'Biyeyuanxiaojizhuanye'
          },
          {
              title: '毕业时间',
              key: 'Biyeshijian',
              width: 100,
              render: (h, { row, column, index }) => {
              return h('span', {}, moment(row.Biyeshijian).format('YYYY-MM-DD'))
          }
          },
          {
              title: '参加工作时间及单位',
              key: 'Gongzuoshijiandanwei',
              width: 150
          },
          {
              title: '参加技术工作时间及单位',
              key: 'Jishugongzuoshijiandanwei',
              width: 150
          },
          {
              title: '现从事专业',
              key: 'Xianzhuanye',
              width: 150
          },
          {
              title: '取得专业技术资格及时间',
              key: 'Qudejishuzigeshijian',
              width: 150
          },
          {
              title: '是否具有鉴定资格',
              width: 80,
              key: 'Jaindingzige',
              render: (h, { row, column, index }) => {
              return h('span', {}, row.Jaindingzige == 1 ? '是' : '否')
          }
          },
          {
              title: '现所在单位',
              width: 100,
              key: 'Suozaibumen'
          },
          {
              title: '是否现场勘察人员',
              width: 80,
              key: 'Kancha',
              render: (h, { row, column, index }) => {
              return h('span', {}, row.Kancha == 1 ? '是' : '否')
          }
          }
      ],
        tmpdata: '',
        operateList: [],
        columns8: [
          {
              title: '姓名',
              key: 'Name'
          },
          {
              title: '性别',
              key: 'Sex'
          },
          {
              title: '出生年月',
              key: 'Birth'
          },
          {
              title: '学历',
              key: 'Xueli'
          },
          {
              title: '学历获得',
              key: 'Xuelihuode'
          },
          {
              title: '毕业院校及专业',
              key: 'Biyeyuanxiaojizhuanye'
          },
          {
              title: '毕业时间',
              key: 'Biyeshijian'
          },
          {
              title: '参加工作时间及单位',
              key: 'Gongzuoshijiandanwei'
          },
          {
              title: '参加技术工作时间及单位',
              key: 'Jishugongzuoshijiandanwei'
          },
          {
              title: '现从事专业',
              key: 'Xianzhuanye'
          },
          {
              title: '取得专业技术资格及时间',
              key: 'Qudejishuzigeshijian'
          },
          {
              title: '是否具有鉴定资格',
              key: 'Jaindingzige'
          },
          {
              title: '现所在单位',
              key: 'Suozaibumen'
          },
          {
              title: '是否现场勘察人员',
              key: 'Kancha'
          }
      ]
    }
  },
    components: {
      dtable
  },
    methods: {
      handelSelect (rows) {
      // console.log(rows)
        this.operateList = rows
    },
      dataFilter (data) {
        if (Array.isArray(data)) {
          return data.map(v => {
            if (v['Sex'] != undefined) {
              v['Sex'] = v['Sex'] == 0 ? '男' : '女';
          }
            if (v['Birth'] != undefined) {
              v['Birth'] = moment(v['Birth']).format('YYYY-MM-DD')
          }
            if (v['Xuelihuode'] != undefined) {
              let str = '';
              switch (v['Xuelihuode']) {
            case 0:
                str = '全日制';
                break
              case 1:
                str = '函授';
                break
              case 2:
                str = '成人';
                break
              default:
                str = '其它';
                break
            }
              v['Xuelihuode'] = str
          }
            if (v['Biyeshijian'] != undefined) {
              v['Biyeshijian'] = moment(v['Biyeshijian']).format('YYYY-MM-DD')
          }
            if (v['Jaindingzige'] != undefined) {
              v['Jaindingzige'] = v['Jaindingzige'] == 1 ? '是' : '否';
          }
            if (v['Kancha'] != undefined) {
              v['Kancha'] = v['Kancha'] == 1 ? '是' : '否';
          }
            if (v['Xueli'] != undefined) {
              let str = '';
              switch (v['Xueli']) {
            case 0:
                str = '本科';
                break
              default:
                str = '其它';
                break
            }
              v['Xueli'] = str
          }

            return v
        })
      }
        return data
    },
      delCheck (rows) {
      // console.log(rows)
        this.$router.push({
          name: '删除技术人员明细',
          params: {
          // orderData: this.orderData
            dept: {
              id: this.tmpdata.id,
              title: this.tmpdata.title,
              isdelete: true,
              rows: this.operateList
          }
        }
      })
    },
      add () {
        this.$router.push({
          name: '添加技术人员明细',
          params: {
          // orderData: this.orderData
            dept: {
              id: this.tmpdata.id,
              title: this.tmpdata.title
          }
        }
      })
    },
      refresh () {},
      addClick () {},
      delCheckClick () {},
      exportData (category) {},
      renderContent (h, { root, node, data }) {
        return h(
        'span',
          {
              style: {
              display: 'inline-block',
              width: '100%',
              cursor: 'pointer'
          },
              on: {
              click: () => {
                console.log(data)

              this.$api.GetEngineerByDept({ DeptId: data.id }).then(res => {
                  if (res.code == 0) {
                    this.tmpdata = data
                  // console.log(res)
                  this.data6 = res.Data
                }
              })
            }
          }
          },
          [
              h('span', [
              h('Icon', {
                props: {
                  type: 'ios-paper-outline'
              },
                style: {
                  marginRight: '8px'
              }
            }),
              h('span', data.title)
          ]),
              h('span', {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px'
            }
          })
          ]
      )
    },
      getDept () {
        this.$api.GetDeptTree().then(res => {
        // console.log(res);
          if (res.code == 0) {
            this.data5 = res.Data.treedata
          if (this.data5.length > 0) {
              let topId = this.data5[0]['id']
            this.tmpdata = this.data5[0]
            this.$api.GetEngineerByDept({ DeptId: topId }).then(res => {
                if (res.code == 0) {
                  this.data6 = res.Data
              }
            })
          }
        }
      })
    }
  },
    mounted () {
      this.getDept()
  }
}
</script>

<style scoped>
.min-height {
  min-height: 560px;
}
.table {
  overflow-x: scroll;
}
.tree {
  max-height: 500px;
  overflow-y: scroll;
}
</style>
